<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微软官网</title>
    <link rel="stylesheet" href="css/weiruan.css">

</head>

<body>
    <!-- 导航栏 -->
    <div class="header">
        <div class="header-nav">
            <div class="header-nav1">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                  </svg>
            </div>
            <div class="header-nav1">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                  </svg>
            </div>
            <div class="header-nav-img">
                <a href="#"><img src="img/logo.png" alt=""></a>
            </div>
            <div class="header-nav-list">
                <ul>
                    <li>
                        <a href="#">Microsoft 365</a>
                    </li>
                    <li>
                        <a href="#">Office</a>
                    </li>
                    <li>
                        <a href="#">Windows</a>
                    </li>
                    <li>
                        <a href="#">Surface</a>
                    </li>
                    <li>
                        <a href="#">Xbox</a>
                    </li>
                    <li>
                        <span class="hiddle1"><a href="#">优惠</a></span>
                    </li>
                    <li>
                        <span class="hiddle1"> <a href="#">支持</a></span>
                    </li>
                    <li>
                        <span class="hiddle"><a href="#">更多</a></span>
                    </li>
                </ul>
            </div>
            <div class="header-nav-search">
                <button><span>所有 Microsoft</span></button>
                <div class="header-nav-search1">
                    <a href="">
                        <span class="hiddle1">搜索</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                      </svg>
                    </a>
                </div>
                <div class="header-nav-search2">
                    <a href="">
                        <span class="hiddle1"> 购物车</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
                        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                      </svg>
                    </a>
                </div>
                <div class="header-nav-search3">
                    <a href="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                      </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容栏 -->
    <div class="wr">
        <!-- 第一个图片栏 -->
        <div class="banner">
            <div class="banner-img">
                <picture>
                    <source media="(max-width:768px)" srcset="img/banner.jfif">

                    <img src="img/banner2.jfif" alt="">
                </picture>

            </div>
            <div class="banner-font">
                <div class="banner-font1">
                    <h2>Surface 精选主机享买赠好礼，开启新学年！</h2>
                    <div>选择轻盈的 Surface 笔记本电脑，充分利用每一天</div>
                    <a href=""><span>立享优惠 &gt;</span></a>
                </div>
            </div>
        </div>
        <!-- 微软硬件软件安装栏 -->
        <div class="nav-row">
            <div class="nav-col">
                <div class="nav-col-img">
                    <img src="img/小图标1.png" alt="">
                    <div class="nav-col-font">选择你的 Microsoft 365</div>
                </div>
            </div>
            <div class="nav-col">
                <div class="nav-col-img">
                    <img src="img/小图标2.webp" alt="">
                    <div class="nav-col-font">购买 Surface 设备</div>
                </div>
            </div>
            <div class="nav-col">
                <div class="nav-col-img">
                    <img src="img/小图标3.webp" alt="">
                    <div class="nav-col-font">购买 Xbox 游戏和主机</div>
                </div>
            </div>
            <div class="nav-col">
                <div class="nav-col-img">
                    <img src="img/小图标4.webp" alt="">
                    <div class="nav-col-font">获取 Windows 10</div>
                </div>
            </div>
            <div class="nav-col">
                <div class="nav-col-img">
                    <img src="img/小图标5.webp" alt="">
                    <div class="nav-col-font">购买商用版</div>
                </div>
            </div>
        </div>
        <!-- 第一个商品栏-->
        <div class="row">
            <div class="wr-col">
                <a href="">
                    <div class="col-img"><img src="img/RE4ualh.webp" alt=""></div>
                    <div class="col-font">
                        <h3>赋予便携新能量</h3>
                        <div>Surface Go 2 将平板电脑的多功能性与笔记本电脑的便携性相结合。</div>
                        <a href="#">立即购买 &gt;</a>
                    </div>
                </a>
            </div>
            <div class="wr-col">
                <a href="">
                    <div class="col-img"><img src="img/RE4E4rR.webp" alt=""></div>
                    <div class="col-font">
                        <h3>Microsoft 365</h3>
                        <div>只需一次便捷的订阅，便可使用高级 Office 应用、额外的云存储、高级安全性等功能。</div>
                        <a href="#">最多可允许 6 名用户安装 &gt;</a>
                    </div>
                </a>
            </div>
            <div class="wr-col">
                <a href="">
                    <div class="col-img"><img src="img/RE4FcPF.webp" alt=""></div>
                    <div class="col-font">
                        <h3>Power your dreams</h3>
                        <div>购买 Xbox Series X 和 Xbox Series S，体验新时代的先进性能。</div>
                        <a href="#">Xbox Series X &gt;</a>
                    </div>
                </a>
            </div>
            <div class="wr-col">
                <a href="">
                    <div class="col-img"><img src="img/RE4DkWk.webp" alt=""></div>
                    <div class="col-font">
                        <h3>不错过任一美妙节拍</h3>
                        <div>探索最新的 Surface 音频，体验舒适度极佳的设计、沉浸式的音效和全天电池续航。</div>
                        <a href="#">购买 Surface Earbuds &gt;</a>
                    </div>
                </a>
            </div>
        </div>
        <!-- 第二个图片栏 -->
        <div class="banner1">
            <div class="banner1-img">
                <picture>
                    <source media="(max-width:768px)" srcset="img/banner3.jfif">

                    <img src="img/banner4.jfif" alt="">
                </picture>

            </div>
            <div class="banner1-font">
                <div class="banner1-font1">
                    <h2>Microsoft Edge</h2>
                    <div>浏览过程中，可体验出色性能，隐私性更强、效率和价值更高</div>
                    <a href=""><span>立即下载 &gt;</span></a>
                </div>
            </div>
        </div>
        <!-- 第二个商品栏 -->
        <div class="row">
            <div class="col-title">
                商业版
            </div>
            <div class="wr-col">

                <a href="">
                    <div class="col-img"><img src="img/row1.webp" alt=""></div>
                    <div class="col-font">
                        <h3>商用 Surface</h3>
                        <div>无论从事何种工作，总有一款 Surface 适合你。</div>
                        <a href="#">立即购买 &gt;</a>
                    </div>
                </a>
            </div>
            <div class="wr-col">
                <a href="">
                    <div class="col-img"><img src="img/row2.webp" alt=""></div>
                    <div class="col-font">
                        <h3>Microsoft 365 商业版</h3>
                        <div>借助功能强大的应用在工作效率、连接和安全性方面保持领先。</div>
                        <a href="#">立即购买 &gt;</a>
                    </div>
                </a>
            </div>
            <div class="wr-col">
                <a href="">
                    <div class="col-img"><img src="img/row3.webp" alt=""></div>
                    <div class="col-font">
                        <h3>Windows 10 企业版</h3>
                        <div>下载适用于 IT 专业人士的 90 天免费评估版。</div>
                        <a href="#">立即下载 &gt;</a>
                    </div>
                </a>
            </div>
            <div class="wr-col">
                <a href="">
                    <div class="col-img"><img src="img/row4.webp" alt=""></div>
                    <div class="col-font">
                        <h3>混合工作解决方案</h3>
                        <div>了解我们采用的方法、Microsoft 在此过程中汲取的经验教训，以及如何为员工提供支持并满足新的客户需求。</div>
                        <a href="#">了解详情</a>
                    </div>
                </a>
            </div>
        </div>
        <!-- 第三个图片栏 -->
        <div class="banner">
            <div class="banner-img">
                <picture>
                    <source media="(max-width:768px)" srcset="img/banner5.jfif">

                    <img src="img/banner6.jfif" alt="">
                </picture>

            </div>
            <div class="banner-font">
                <div class="banner-font1">
                    <h2>企业出海与微软云上同行</h2>
                    <div>企业出海与微软云上同行</div>
                    <a href=""><span>了解更多 &gt;</span></a>
                </div>
            </div>
        </div>
        <!-- 联系栏 -->
        <div class="lianxi"><span>关注 Microsoft</span>
            <a href=""><img src="img/wechat.svg" alt=""></a>
            <a href=""><img src="img/weibo.svg" alt=""></a>
        </div>
    </div>
    <!-- 脚底栏 -->
    <div class="foot">
        <div class="foot1">
            <div class="foot19">
                <div class="foot11">
                    <ul>
                        <li>新增内容</li>
                        <li><a href="#"> 365</a></li>
                        <li><a href="#">Surface Pro 6</a></li>
                        <li><a href="#">Surface Laptop 2</a></li>
                        <li><a href="#">Surface Go</a></li>
                        <li><a href="#">Windows 10 应用程序</a></li>
                    </ul>
                </div>
                <div class="foot12">
                    <ul>
                        <li>Microsoft Store</li>
                        <li><a href="#">帐户个人资料</a></li>
                        <li><a href="#">下载中心</a></li>
                        <li><a href="#">订单跟踪</a></li>
                    </ul>
                </div>
                <div class="foot13">
                    <ul>
                        <li>教育</li>
                        <li><a href="#">Microsoft 教育领域</a></li>
                        <li><a href="#">适合学生的 Office</a></li>
                        <li><a href="#">适用于学校的 Office 365</a></li>
                        <li><a href="#">Microsoft Azure 教育领域</a></li>
                    </ul>
                </div>
            </div>
            <div class="foot19">
                <div class="foot14">
                    <ul>
                        <li>企业</li>
                        <li>
                            <a href="#">Azure</a>
                        </li>
                        <li>
                            <a href="#">AppSource</a>
                        </li>
                        <li>
                            <a href="#">汽车</a>
                        </li>
                        <li>
                            <a href="#">政府机构</a>
                        </li>
                        <li>
                            <a href="#">医疗保健</a>
                        </li>
                        <li>
                            <a href="#">制造业</a>
                        </li>
                        <li>
                            <a href="#">金融服务</a>
                        </li>
                        <li>
                            <a href="#">零售业</a>
                        </li>
                    </ul>
                </div>
                <div class="foot15">
                    <ul>
                        <li>开发人员</li>
                        <li>
                            <a href="#">Microsoft Visual Studio</a>
                        </li>
                        <li>
                            <a href="#">Windows 开发人员中心</a>
                        </li>
                        <li>
                            <a href="#">开发人员中心</a>
                        </li>
                        <li>
                            <a href="#">Microsoft 开发人员计划</a>
                        </li>
                        <li>
                            <a href="#">第9频道</a>
                        </li>
                        <li>
                            <a href="#">Microsoft 365 开发人员中心</a>
                        </li>
                        <li>
                            <a href="#">Microsoft 365 开发人员计划</a>
                        </li>
                    </ul>
                </div>
                <div class="foot16">
                    <ul>
                        <li>公司</li>
                        <li>
                            <a href="#">招贤纳士</a>
                        </li>
                        <li>
                            <a href="#">关于 Microsoft</a>
                        </li>
                        <li>
                            <a href="#">公司新闻</a>
                        </li>
                        <li>
                            <a href="#">Microsoft 隐私</a>
                        </li>
                        <li>
                            <a href="#">投资人</a>
                        </li>
                        <li>
                            <a href="#">安全性</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="foot2">
            <div class="foot21"><a href="#">中文(中国)</a></div>
            <div class="foot22">
                <ul>
                    <li><a herf="">与 Microsoft 联系</a></li>
                    <li><a herf="">隐私</a></li>
                    <li><a herf="">使用条款</a></li>
                    <li><a herf="">商标</a></li>
                    <li><a herf="">关于我们的广告</a></li>
                    <li><a herf="">京ICP备09042378号-6</a></li>
                    <li><a herf="">京公网安备 11010802023178</a></li>
                    <li>© Microsoft 2021</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>